<template>
    <div class="w-100 h-100">
      <div style="width: 100; height: 10%" class="d-flex justify-content-end">
        <FakeLegend
          style="margin: auto 30px auto 0px"
          :color="colorSingleList"
          :text="['目前削减量', '实际削减量']"
        >
        </FakeLegend>
      </div>
      <div class="bottom">
        <div id="wewxj" style="width: 100%; height: 100%"></div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import * as echarts from "echarts";
  import { useFunc } from "@/hook/useFunc";
  import { useOptions } from "@/hook/useOptions";
  
  const colorSingleList = ["rgba(3, 230, 254, 1)", "rgba(184, 235, 143, 1)"];
  let option = {
    tooltip: {
      trigger: "axis",
      axisPointer: { type: "shadow" },
    },
    grid: {
      left: "10%", // 根据实际情况调整，增加这个值
      right: "10%",
      bottom: "10%",
      top: "0%",
      containLabel: true,
    },
    yAxis: {
      type: "category",
      name: "", // 在这里设置你的单位
      nameLocation: "end", // 将单位放在轴的末端（最上方）
      nameTextStyle: {
        // 单位样式设置
        color: "#fff",
        fontSize: 20,
        padding: [0, 0, 10, -10], // 调整单位位置，数组格式为[top, right, bottom, left]
      },
      data: ["COD", "TP", "TN", "NH3-H"],
      axisTick: false,
      axisLine: {
        show: true,
        lineStyle: {
          type: "dashed",
        },
      },
      axisLabel: {
        interval: 0,
        fontSize: 20,
        fontFamily: "OPPOSans-Regular",
        color: "#667A8E",
      },
    },
    xAxis: {
      name:'t/a',
      min: 0,
      max: 100,
      type: "value",
      axisLine: { show: false },
      splitLine: {
        lineStyle: {
          color: "rgba(92,225,255,0.5)", // 设置分割线颜色为蓝色
        },
      },
      axisLabel: {
        interval: 0,
        formatter: "{value}",
        fontSize: 20,
        color: "#667A8E",
      },
    },
    series: [
      {
        name: "目前削减量",
        type: "bar",
        barWidth: 10,
        data: [],
        // z: 2,
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1, // 横向渐变
            y2: 0,
            colorStops: [
              { offset: 1, color: "rgba(3, 230, 254)" },
              { offset: 0, color: "rgba(3, 230, 254,0)" },
            ],
          },
        },
        showBackground: true,
        backgroundStyle: {
          color: "rgba(82, 191, 242, .0)",
          borderColor: "rgba(82, 191, 242, .2)",
          borderWidth: 2,
        },
      },
  
      {
        name: "实际削减量",
        type: "bar",
        barWidth: 10,
        // barGap: '200%',
        data: [],
        z: 1,
        itemStyle: {
          color: {
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            type: "linear",
            global: false,
            colorStops: [
              {
                offset: 1,
                color: "rgba(184, 235, 143)",
              },
              {
                offset: 0,
                color: "rgba(184, 235, 143,0)",
              },
            ],
          },
        },
        showBackground: true,
        backgroundStyle: {
          color: "rgba(82, 191, 242, .0)",
          borderColor: "rgba(82, 191, 242, .2)",
          borderWidth: 2,
        },
      },
  
      // 省略其他 series 配置，但对于每个 series，确保调整 x2 和 y2 为横向渐变
    ],
  };
  const props = defineProps({
    unit: {
      default: 0,
    },
  });
  
  let myChart: any;
  const jsonData: any = inject("jsonData");
  const current = computed(() => {
    let data = [[], []]
    try {
      data = jsonData.value.yxjk.wrwxj[props.unit];
    } catch (error) {}
  
    return data;
  });
  watch(
    () => current.value,
    (val) => {
      if (val) {
        myChart.setOption({
          series: [{ data: val[0] }, { data: val[1] }],
        });
      }
    }
  );
  
  onMounted(() => {
    myChart = echarts.init(document.getElementById("wewxj") as HTMLElement);
    useFunc().setDefaultOption(myChart);
    myChart.setOption(option);

  });
  </script>
  
  <style lang="less" scoped>
  .bottom {
    width: 100%;
    height: 84%;
    display: flex;
  }
  </style>
  